<template>
<div class="baobiao">

  <h2>营业报表</h2>

<el-form :model="form" :inline="true">
  <el-form-item label="查询日期">
    <el-date-picker
      v-model="form.startDate"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
  </el-form-item>
  <el-form-item label="至">
    <el-date-picker
      v-model="form.endDate"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
  </el-form-item>(不显示当日统计数据)

  <el-button type="warning" @click="searchCwDealPerDayPage">查询</el-button>
  <el-button type="warning" @click="excel">导出Excel</el-button>
</el-form><br>

<!--  <div style="width: 1100px;height: 711px;border: 1px solid black;margin-left: 20px">-->
    <el-tabs type="border-card" stretch @tab-click="handleClick" v-model="activeName" style="border-top: 1px solid black">

        <el-tab-pane label="收入明细" name="first">
          <font size="5">金额总计:{{dto.totalSum}}元</font><br><br>
          <el-row>
            <el-col :span="4">押金(总计):{{dto.depositSum}}</el-col>
            <el-col :span="4">租金(总计):{{dto.rentSum}}</el-col>
            <el-col :span="4">电费(总计):{{dto.electricityFeeSum}}</el-col>
            <el-col :span="4">水费(总计):{{dto.waterFeeSum}}</el-col>
            <el-col :span="4">宽带(总计):{{dto.netFeeSum}}</el-col>
            <el-col :span="4">燃气(总计):{{dto.gasFeeSum}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">有线电视(总计):{{dto.cableFeeSum}}</el-col>
            <el-col :span="8">其他(总计):{{dto.otherFeeSum}}</el-col>
          </el-row>



          <el-table
            style="border: 1px solid black"
            :data="tableData"
            v-loading="loading">
            <el-table-column
              prop="dealDate"
              label="交易时间">
            </el-table-column>
            <el-table-column
              prop="total"
              label="总计（元）">
            </el-table-column>
            <el-table-column
              prop="deposit"
              label="押金（元）">
            </el-table-column>
            <el-table-column
              prop="rent"
              label="租金（元）">
            </el-table-column>
            <el-table-column
              prop="electricityFee"
              label="电费（元）">
            </el-table-column>
            <el-table-column
              prop="waterFee"
              label="水费（元）">
            </el-table-column>
            <el-table-column
              prop="netFee"
              label="宽带（元）">
            </el-table-column>
            <el-table-column
              prop="gasFee"
              label="燃气费（元）">
            </el-table-column>
            <el-table-column
              prop="cableFee"
              label="有线电视费（元）">
            </el-table-column>
            <el-table-column
              prop="otherFee"
              label="其他（元）">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="look(scope.row,1)"><font color="orange">查看</font></el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="sizes"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="支出明细" name="second">
          <font size="5">金额总计:{{dto.totalSum}}元</font><br><br>
          <el-row>
            <el-col :span="4">押金(总计):{{dto.depositSum}}</el-col>
            <el-col :span="4">租金(总计):{{dto.rentSum}}</el-col>
            <el-col :span="4">电费(总计):{{dto.electricityFeeSum}}</el-col>
            <el-col :span="4">水费(总计):{{dto.waterFeeSum}}</el-col>
            <el-col :span="4">宽带(总计):{{dto.netFeeSum}}</el-col>
            <el-col :span="4">燃气(总计):{{dto.gasFeeSum}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">有线电视(总计):{{dto.cableFeeSum}}</el-col>
            <el-col :span="8">其他(总计):{{dto.otherFeeSum}}</el-col>
          </el-row>



          <el-table
            :data="tableData"
            style="border: 1px solid black"
            v-loading="loading">
            <el-table-column
              prop="dealDate"
              label="交易时间">
            </el-table-column>
            <el-table-column
              prop="total"
              label="总计（元）">
            </el-table-column>
            <el-table-column
              prop="deposit"
              label="押金（元）">
            </el-table-column>
            <el-table-column
              prop="rent"
              label="租金（元）">
            </el-table-column>
            <el-table-column
              prop="electricityFee"
              label="电费（元）">
            </el-table-column>
            <el-table-column
              prop="waterFee"
              label="水费（元）">
            </el-table-column>
            <el-table-column
              prop="netFee"
              label="宽带（元）">
            </el-table-column>
            <el-table-column
              prop="gasFee"
              label="燃气费（元）">
            </el-table-column>
            <el-table-column
              prop="cableFee"
              label="有线电视费（元）">
            </el-table-column>
            <el-table-column
              prop="otherFee"
              label="其他（元）">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text"><font color="orange" @click="look(scope.row,2)">查看</font></el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="sizes"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-tab-pane>

    </el-tabs>
<!--  </div>-->



  <el-dialog title="查看" :visible.sync="dialogFormVisible">
    <el-row>
      <el-col :span="6">交易时间：{{lookDealDate}}</el-col>
      <el-col :span="6">收入金额总计：{{lookTotal}}</el-col>
    </el-row>
    <el-table :data="gridData">
      <el-table-column property="date" label="序号"></el-table-column>
      <el-table-column property="dealDate" label="交易时间"></el-table-column>
      <el-table-column property="roomName" label="房源名称"></el-table-column>
      <el-table-column property="tenantName" label="租客姓名"></el-table-column>
      <el-table-column property="tenantPhone" label="租客电话"></el-table-column>
      <el-table-column property="itemType" label="费用类型"></el-table-column>
      <el-table-column property="dealDesc" label="收支状态"></el-table-column>
      <el-table-column property="realPaymentAmount" label="金额（元）"></el-table-column>
      <el-table-column property="payMethod" label="支付方式"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>

<!--  <div id="main" style="width:800px;height:300px"></div>-->

</div>
</template>

<script>
import * as echarts from 'echarts'
import {searchCwDealPerDayPage,searchCwDealPerDayDetailReceiptPage,searchCwDealPerDayDetailPayPage,cwDealPerDayExcelList} from "@/api/wishu/baobiao";
import {titleCase} from "@/utils";
export default {
  name: "index",
  data(){
    return{
      form:{},
      tableData:[],
      current:1,
      sizes:[2,3,5,10,20],
      size:5,
      total:0,
      dto:{},
      dialogFormVisible:false,
      gridData:[],
      loading:false,
      lookTotal:0,
      lookDealDate:'',
      charts: '',
      opinionData: [],
      titleText:'收入明细',
      activeName:'first',
      queryParams: {
        pageNum: this.current,
        pageSize: this.size,
        jobName: undefined,
        jobGroup: undefined,
        status: undefined
      }
    }
  },
  created() {
    this.loading=true;
    this.form.operationType=1;
    this.searchCwDealPerDayPage();
  },
  methods: {
    searchCwDealPerDayPage() {
      this.loading = true;
      searchCwDealPerDayPage(this.current, this.size, this.form).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
        this.dto = res.dto;
        this.opinionData=res.opinionData;
        this.loading = false;
      })
    },
    handleSizeChange(val) {
      this.loading = true;
      this.size = val;
      this.searchCwDealPerDayPage();
    },
    handleCurrentChange(val) {
      this.loading = true;
      this.current = val;
      this.searchCwDealPerDayPage();
    },
    handleClick(tab, event) {
      if (tab.name == 'first') {
        this.titleText='收入明细';
        this.form.operationType = 1;
        this.searchCwDealPerDayPage();
      }
      if (tab.name == 'second') {
        this.titleText='支出明细';
        this.form.operationType = 2;
        this.searchCwDealPerDayPage();
      }
    },
    look(row, num) {
      this.gridData = [];
      this.lookTotal = row.total;
      this.lookDealDate = row.dealDate;
      if (num == 1) {
        searchCwDealPerDayDetailReceiptPage(row).then((res) => {
          this.gridData = res.list;
          this.dialogFormVisible = true;
        })
      }else if (num == 2) {
        searchCwDealPerDayDetailPayPage(row).then((res) => {
          this.gridData = res.list;
          this.dialogFormVisible = true;
        })
      }
    },
    excel(){
      cwDealPerDayExcelList(this.current,this.size,this.form).then((res) => {
        if(res){
          this.$message.success('导出成功');
        }else{
          this.$message.error('导出失败');
        }
      })
    }
    /*drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        title: {
          text: this.titleText,
          left: '1%'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '5%',
          right: '15%',
          bottom: '10%'
        },
        xAxis: {
          data: this.opinionData.map(function (item) {
            return item[0]
          })
        },
        yAxis: {},
        toolbox: {
          right: 10,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },

        series: {
          name: 'Beijing AQI',
          type: 'line',
          data: this.opinionData.map(function (item) {
            return item[1]
          }),
          markLine: {
            silent: true,
            lineStyle: {
              color: '#333'
            },
            data: [
              {
                yAxis: 0
              },
              {
                yAxis: 50
              },
              {
                yAxis: 100
              },
              {
                yAxis: 200
              },
              {
                yAxis: 300
              }
            ]
          }
        }
      })
    }*/
  },
  /*mounted() {
    this.$nextTick(function () {
      this.drawLine('main')
    })
  }*/
}
</script>

<style scoped>

</style>
